import React, { Component } from 'react'
import Detailed from './Detailed'
import { Link, Route } from "react-router-dom"

export default class Message extends Component {
    state = {
        msgList: [
            {
                id: "01",
                title: "消息1",
                content: "我爱你，中国"
            },
            {
                id: "02",
                title: "消息2",
                content: "我爱你，React"
            },
            {
                id: "03",
                title: "消息3",
                content: "我爱你，自己"
            },
        ]
    }

    pushShow = (row) => {
        const { id, title, content } = row
        // push模式传递prames参数
        // this.props.history.push(`/home/message/detailed/${id}/${title}/${content}`)

        // push模式传递search参数
        // this.props.history.push(`/home/message/detailed?id=${id}&title=${title}&content=${content}`)

        // push 模式传递 state 参数
        this.props.history.push(`/home/message/detailed`, {
            id, title, content
        })
    }

    pushReplace = (row) => {
        const { id, title, content } = row
        // replace模式传递prames参数
        // this.props.history.replace(`/home/message/detailed/${id}/${title}/${content}`)

        // replace模式传递search参数
        // this.props.history.replace(`/home/message/detailed?id=${id}&title=${title}&content=${content}`)

        // replace 模式传递 state 参数
        this.props.history.replace(`/home/message/detailed`, {
            id, title, content
        })
    }

    back = () => {
        this.props.history.goBack()
    }

    forward = () => {
        this.props.history.goForward()
    }

    goTwo = () => {
        this.props.history.go(2)
    }

    backTow = () => {
        this.props.history.go(-2)
    }



    render() {
        const { msgList } = this.state
        return (
            <div>
                {
                    msgList.map(item => {
                        return (
                            <div key={item.id}>
                                {/* 使用params的方式给路由组件传递参数 */}
                                <Link replace to={`/home/message/detailed/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>

                                {/* 使用search的方式给路由组件传递参数 */}
                                {/* <Link to={`/home/message/detailed/?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link> */}

                                {/* 使用 state 方式传递路由参数 */}
                                {/* <Link to={{
                                    pathname: '/home/message/detailed',
                                    state: {
                                        id: item.id,
                                        title: item.title,
                                        content: item.content
                                    }
                                }}>
                                    {item.title}
                                </Link> */}

                                <button onClick={() => this.pushShow(item)}>push查看</button>
                                <button onClick={() => this.pushReplace(item)}>replace查看</button>
                            </div>

                        )
                    })
                }
                <hr />
                {/* 使用params的方式给路由组件传递参数 */}
                {/* <Route path="/home/message/detailed/:id/:title/:content" component={Detailed} /> */}

                {/* 使用search的方式给路由组件传递参数 */}
                {/* <Route path="/home/message/detailed" component={Detailed}></Route> */}

                {/* 使用state的方式给路由组件传递参数 */}
                <Route path="/home/message/detailed" component={Detailed}></Route>

                <hr />
                <button onClick={this.back}>返回</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.goTwo}>前进两级</button>
                <button onClick={this.backTow}>后退两级</button>
            </div>
        )
    }
}
